<template>
  <el-dialog :title="title" :visible.sync="open" @close="close">
    <el-form ref="formRef" :model="row" :rules="rules" label-width="120px">
      <el-form-item label="数据源名称" prop="dataSourceName">
        <el-input v-model.trim="row.dataSourceName" maxlength="40" placeholder="请输入内容" class="limit" />
      </el-form-item>
      <el-form-item label="系统名称" prop="systemId">
        <el-select v-model="row.systemId" placeholder="系统名称" clearable filterable>
          <el-option
            v-for="(item, index) in systemIdList"
            :key="index"
            :label="item.systemCode + ' / ' + item.systemName"
            :value="item.id"
          /></el-select>
      </el-form-item>
      <el-form-item label="数据源类型" prop="dataSourceType">
        <el-select v-model="row.dataSourceType" placeholder="所有数据源" clearable filterable width="100%">
          <el-option value="mysql" label="mysql数据库" />
          <el-option value="oracle" label="oracle数据库" />
          <el-option value="pgsql" label="pgsql数据库" />
          <el-option value="mssql" label="sqlServer数据库" />
          <el-option value="dm" label="dm数据库" />
        </el-select>
      </el-form-item>
      <el-form-item label="ip地址" prop="jdbcIp">
        <el-input v-model.trim="row.jdbcIp" maxlength="20" placeholder="请输入内容" class="limit" />
      </el-form-item>
      <el-form-item label="端口号" prop="jdbcPort">
        <el-input v-model.trim="row.jdbcPort" maxlength="6" placeholder="请输入内容" class="limit" />
      </el-form-item>
      <el-form-item v-if="row.dataSourceType === 'oracle'" label="选择类型" prop="serviceType">
        <el-radio v-model="row.serviceType" label="1">ServiceName</el-radio>
        <el-radio v-model="row.serviceType" label="2">SID</el-radio>
        <el-radio v-model="row.serviceType" label="3">TNSName</el-radio>
      </el-form-item>
      <el-form-item label="数据库名" prop="jdbcName">
        <el-input v-model.trim="row.jdbcName" maxlength="30" placeholder="请输入内容" class="limit" />
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input v-model.trim="row.username" maxlength="30" placeholder="请输入内容" class="limit" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model.trim="row.password" type="password" maxlength="200" placeholder="请输入内容" class="limit" />
      </el-form-item>
      <el-form-item label="cron表达式" prop="cron">
        <el-input v-model.trim="row.cron" readonly placeholder="请输入cron表达式" maxlength="30" class="limit" />
        <el-button @click="addCron">生成表达式</el-button>
      </el-form-item>
      <el-form-item label="预警联系人" prop="alarmUsers">
        <el-select
          v-model="row.alarmUsers"
          multiple
          collapse-tags
          placeholder="请选择"
          collapse-tag
          filterable
          clearable
        >
          <el-option
            v-for="(item) in receiveUserList"
            :key="item.id"
            :value="item.id"
            :label="item.realName"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-switch
          v-model="row.taskStatus"
          active-color="#13ce66"
          active-text="开启"
          active-value="1"
          inactive-color="#ff4949"
          inactive-text="停止"
          inactive-value="2"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input v-model.trim="row.remarks" type="textarea" maxlength="200" placeholder="请输入内容" class="limit" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :disabled="testLoading" :loading="testLoading" type="primary" @click="connect">测试连接</el-button>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </span>
    <dt-Vcrontab ref="vcrontabRef" v-model.trim="row.cron" />
  </el-dialog>
</template>

<script>
import databaseMonitorApi from '@/api/monitor/DatabaseMonitor'
import { addRes } from '@/utils/editAlarmUser'

export default {
  name: 'DataAddDialog',
  props: ['systemIdList', 'receiveUserList'],
  data() {
    return {
      testLoading: false,
      f: false,
      title: '',
      open: false,
      row: {
        taskStatus: '1',
        serviceType: ''
      },
      // 表单校验
      rules: {
        dataSourceName: { required: true, message: '请输入数据源名称', trigger: 'blur' },
        systemId: { required: true, message: '请选择系统名称', trigger: 'change' },
        dataSourceType: { required: true, message: '请选择数据源类型', trigger: 'change' },
        jdbcIp: { required: true, message: '请输入ip地址', trigger: 'blur' },
        jdbcPort: { required: true, message: '请输入端口号', trigger: 'blur' },
        serviceType: { required: true, message: '请选择类型', trigger: 'change' },
        // jdbcName: { required: true, message: '请输入数据库名', trigger: 'blur' },
        username: { required: true, message: '请输入用户名', trigger: 'blur' },
        password: { required: true, message: '请输入密码', trigger: 'blur' },
        cron: { required: true, message: '请设置cron表达式', trigger: 'change' },
        alarmUsers: { required: true, message: '请选择预警联系人', trigger: 'change' }
      }
    }
  },
  methods: {
    dadEmit(val) {
      this.$emit(val)
    },
    close() {
      this.row = {
        taskStatus: '1'
      }
      this.open = false
      this.f = false
    },
    addCron() {
      this.$refs.vcrontabRef.showDialog()
    },
    connect() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.testLoading = true
          databaseMonitorApi.connect(this.deepCopy()).then(res => {
            this.$message.success('连接测试成功')
            this.f = true
          }).finally(() => {
            this.testLoading = false
          })
        }
      })
    },
    submitForm() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.f = false
          if (!this.row.id) {
            databaseMonitorApi.addDatabaseMonitor(this.deepCopy()).then(res => {
              if (res.code === '00000') {
                this.$message.success('新增数据源成功')
                this.dadEmit('getList')
                this.open = false
                // this.f = false
              }
            }).finally(() => {
              this.f = true
            })
          } else {
            databaseMonitorApi.updateDatabaseMonitor(this.deepCopy(true)).then(res => {
              if (res.code === '00000') {
                this.$message.success('修改数据源成功')
                this.dadEmit('getList')
                this.open = false
                this.f = false
              }
            }).finally(() => {
              this.f = true
            })
          }
        }
      })
    },
    deepCopy(f) {
      const data = JSON.parse(JSON.stringify(this.row))
      data.alarmUsers = addRes(data.alarmUsers)
      // data.status = '1'
      delete data.status
      return data
    }
  }
}
</script>

<style scoped lang="scss">

</style>
